<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../CSS/media.css">
    <style>
        .home-container {
            width: 80%;
            margin: auto;
        }

        .mould {
            margin: auto;
            margin-top: 20px;
        }

        .home-container > div {
            margin-bottom: 20px;
            background: #fff !important;
        }

        .mould .title {
            padding: 10px;
            margin: auto;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }

        #wheel {
            margin: auto;
            margin-top: 20px;
        }

        .carouselItem {
            cursor: pointer;
        }

        .m_news_add {
            margin: auto;
            overflow: hidden;
            padding: 20px 0px;
            box-sizing: border-box;
        }

        .m_btn {
            display: inline-block;
            padding: 10px;
            cursor: pointer;
        }

        .m_icon_list {
            padding: 0px 20px;
        }
    </style>
</head>
<body style="width: 100%;padding: 0px; background-color: #eaeaea;">
<div class="home-container">
    <!--轮播图-->
    <div class="layui-carousel" id="wheel">
        <div carousel-item>
        </div>
    </div>
</div>

<script src="../../JS/jquery-2.0.3.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script>
    $(function () {
        //轮播图跳转
        $('#wheel').on('click', '.carouselItem', function () {
            var url = $(this).attr('to');
            parent.document.getElementById("view").src = url;
        })

        //模型按钮类型跳转
        $('.container').on('click', '.m_btn', function () {
            var url = $(this).attr('to');
            parent.document.getElementById("view").src = url;
        })
    })
    layui.use(['element', 'carousel'], function () {
        var element = layui.element
            , carousel = layui.carousel;


        //获取首页配置数据
        //获取用户账号
        if (parent.getLocalStorage('JSXM')) {
            var user = parent.getLocalStorage('JSXM').userCount;
        }
        parent.ajaxGet(parent.defaultUrl + '/selMP', {user: user,enable:1}, function (data) {
            data = JSON.parse(data.data[0].PAGE_CONTENT);
            //判断是否有轮播图
            if (data.wheel !== null) {
                if (data.wheel.tab.length > 0) {
                    for (var i = 0, l = data.wheel.tab.length; i < l; i++) {
                        $('#wheel>div').append('<div class="carouselItem" to="' + data.wheel.tab[i].url + '"><img src="' + data.wheel.tab[i].img + '"/></div>')
                    }
                }
                carousel.render({
                    elem: '#wheel'
                    , width: data.wheel.width + '%' //设置容器宽度
                    , height: data.wheel.height + 'px'
                    , arrow: 'always' //始终显示箭头
                    , indicator: 'none'
                    //,anim: 'updown' //切换动画方式
                });
            }
            //模块写入
            if (data.mould.length > 0) {
                for (var i = 0, l = data.mould.length; i < l; i++) {
                    //判断是否有标题
                    var isTitle = (data.mould[i].title !== null) ? 'block' : 'none';
                    var width = data.mould[i].width;
                    var height = data.mould[i].height;
                    var html = '';
                    switch (data.mould[i].type) {
                        case '网页':
                            html = '<div style="width:' + width + '%;height:' + height + 'px" class="mould mould' + i + '"><div style="display: ' + isTitle + '" class="title">' + data.mould[i].title + '</div><div style="height:' + (height - 50) + 'px" class="con"><iframe frameborder="none" style="width:100%;height:' + (height - 50) + 'px"  src="' + data.mould[i].url + '"></iframe></div></div>'
                            break;
                        case '新闻':
                            html = '<div style="width:' + width + '%;height:' + height + 'px" class="mould mould' + i + '"><div style="display: ' + isTitle + '"  class="title">' + data.mould[i].title + '</div><div style="height:' + (height - 50) + 'px" class="con">' + data.mould[i].url + '</div></div>'
                            break;
                        case '按钮':
                            html = '<div style="width:' + width + '%;height:' + height + 'px" class="mould mould' + i + '"><div style="display: ' + isTitle + '" class="title">' + data.mould[i].title + '</div><div style="height:' + (height - 50) + 'px" class="con"><div class="m_icon_list">'
                            if (data.mould[i].tab.length > 0) {
                                for (var a = 0, b = data.mould[i].tab.length; a < b; a++) {
                                    html += '<li to="' + data.mould[i].tab[a].url + '" class="m_btn m_btn_' + a + '"><img src="' + data.mould[i].tab[a].img + '"></li>'
                                }
                            }
                            html += '</div></div></div>'
                            break;
                    }
                    $('.home-container').append(html)
                }
            }

        })

    });
</script>
</body>
</html>